<template>
	<view class="pop-wrap-kefu">
		<u-popup :show="show" mode="center" @close="onClosePop" @open="onOpenPop" zIndex="10071" :closeOnClickOverlay="true"
			:safeAreaInsetBottom="false" round="10rpx">
			<view class="pop-ctx">
				<view class="header-box">
					<view class="title">
						联系客服
					</view>
					<image class="close" src="@/static/my/close-w.png" mode="" @click="doClose()"></image>
				</view>
				<view class="body-box">
					<view class="btn-box">
						<button open-type="contact" class="btn-mp-kefu flex-between" type="default" @click="open_kefu()">
							<view class="nav-title">
								在线客服
							</view>
							<view class="icon-box">
								<image class="icon" src="@/static/my/kefu-arrow.png" mode=""></image>
							</view>
						</button>
					</view>

					<view class="info-box">
						<view class="kefu-time flex">
							<text class="label">
								{{vuex_config.comTitle}}客服电话</text>
							<text class="time">
								（服务时间09：00-20：30）
								<!-- {{vuex_config.site_time}} -->
							</text>
						</view>
						<!-- <view class="service-time">
							（服务时间09：00-20：30）
						</view> -->
						<view class="kefu-phone flex" @click="to_phone()">
							<text>{{vuex_config.comKefu}}</text>
							<image class="icon" src="@/static/my/kefu-phone.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "kefu-pop",
		data() {
			return {
				show: false,
			}
		},
		methods: {
			init() {
				this.show = true;
			},
			to_phone() {
				uni.makePhoneCall({
					phoneNumber: `${this.vuex_config.site_tel}`
				})
			},
			onOpenPop() {

			},
			onClosePop() {
				this.show = false;
			},
			doClose() {
				this.show = false;
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		// border-radius: 32rpx 32rpx 32rpx 32rpx;
		background: transparent;
	}

	.pop-ctx {
		position: relative;
		width: calc(100vw - 72rpx);
		margin: 0 auto;
		height: auto;
		border-radius: 10rpx;
		overflow: hidden;
		background: #fff;


		.header-box {
			background: #CB0011;
			justify-content: space-between;
			padding: 0 24rpx;
			position: relative;
			// border-bottom: 2rpx solid #F5F5F5;
			// padding-top: 40rpx;

			.title {
				line-height: 88rpx;
				height: 88rpx;
				text-align: left;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				font-weight: bold;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

			.close {
				top: 20rpx;
				right: 32rpx;
				position: absolute;
				width: 36rpx;
				height: 36rpx;

			}
		}
	}

	.body-box {
		.btn-box {
			padding: 24rpx;


			.btn-mp-kefu {
				height: 76rpx;
				background: #CB0011;
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;

				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;

				.icon-box {
					width: 14rpx;
					height: 24rpx;

					.icon {
						width: 14rpx;
						height: 24rpx;
					}
				}
			}
		}
	}


	.info-box {
		padding: 20rpx 40rpx;
		background: #FAE5E6;
	}

	.kefu-time {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #000000;

		.label {}

		.time {
			flex: 1;
			overflow: hidden;
			margin-left: 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #545B6A;
		}
	}

	.service-time {
		margin-top: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}


	.kefu-phone {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #000000;

		.icon {
			width: 20rpx;
			height: 20rpx;
			margin-left: 30rpx;
		}
	}
</style>